<template>
  <div ref='main'
       :style="{ width:width, height:height }"></div>
</template>

<script>
import 'echarts-liquidfill/src/liquidFill.js';
export default {
  props: {
    width: {
      type: String,
      required: false,
      default: '100%'
    },
    height: {
      type: String,
      required: false,
      default: '100%'
    },
    option: {
      type: Object,
      required: false,
      default: () => {
        return {}
      }
    },
    isRefresh: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {

    }
  },
  mounted () {
    this.$nextTick(() => {
      this.reviewEcharts(this.option)
    })
  },
  methods: {
    reviewEcharts (option) {
      const echarts = require('echarts')
      const myEcharts = echarts.init(this.$refs.main)
      // myEcharts.clear()
      myEcharts.setOption(option)
      window.addEventListener('resize', () => {
        // 自动渲染echarts
        myEcharts.resize()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>